<template>
  <el-dialog
      v-model="dialogOpen"
      :title="dialogTitle"
      :width="dialogWidth"
      :modal="needModal"
      draggable
      modal-append-to-body="true"
      @close="closeDialog"
      append-to-body="true"
      modal-class="custom-3d-dialog"
      destroy-on-close="true"
    >
    <div class="custom-header">
      <slot name="head"></slot>
    </div>
    <div class="custom-content">
      <slot name="content"></slot>
    </div>
    <div class="custom-footer">
      <slot name="footer"></slot>
    </div>
    </el-dialog>
</template>
<script lang= "ts" setup>

const dialogOpen = ref(false)

// 定义父组件传过来的值
const props = defineProps({
	// 弹框标题
	dialogTitle: {
		type: String,
		default: '详情'
	},
	// 宽度
	dialogWidth: {
		type: Number,
		default: 900
	},
	// 是否需要遮罩层
	needModal: {
    type: Boolean,
    default: () => false
  }
});



const openDialog = () => {
  dialogOpen.value = true
  console.log(props)
}

const closeDialog = () => {
  dialogOpen.value = false
}


// 暴露变量 只有暴漏出来的变量 父组件才能使用
defineExpose({
  openDialog,
  closeDialog
});
</script>
<style lang="scss">
.custom-3d-dialog{
  z-index: 2;
  //height: 596px;
  // background:var(--el-overlay-color-lighter);
  background-size: 100% 100%;
  .el-overlay-dialog {
		display: flex;
		align-items: center;
		justify-content: center;
		position: unset !important;
		width: 100%;
		height: 100%;

		.el-dialog {
			margin: 0 auto !important;
			position: absolute;
			background: rgba(26,53,98,0.6);
			.el-dialog__body {
				// padding: 20px !important;
			}
			.el-dialog__title {
			}
		}

		// avue样式重置
		.avue-dialog  {
			.el-dialog__header{
				border-bottom: none;
			}
			.el-dialog__body {
				padding-bottom: 60px!important;
				flex: 1;
				overflow: scroll;
				// background: var(--el-bg-color-overlay);
			}
			.avue-form {
				.el-form-item--default {
					margin-bottom: 18px!important;
				}
			}
			.avue-dialog__footer{
				border-top: none;
				background: transparent;
				background: var(--el-bg-color-overlay);
			}
			
		}
		.avue-crud--card {
			.avue-crud__header {
				// display: none;
				background-color: initial;
				margin-bottom: 0;
				min-height: 34px; 
			}
			.avue-crud__tip {
				background-color: #44638A;
				border: none;
			}
		}
	}
  .el-dialog__header {
    color: #fff;
    text-align: center;
  }
  .el-dialog__title {
    color: #fff;
  }
  .el-dialog__body {
    padding: 10px 20px 20px 20px;
  }
}
.d-title {
  font-family: 'Microsoft Yahei';
  margin-top: 20px;
  position: relative;
  padding-left: 15px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  &:before {
    content: "";
    position: absolute;
    width: 3px;
    height: 16px;
    left: 0;
    top: 3px;
    background: var(--sys-color-primary);
  }
}
.info{
  .row-text {
    height: 50px;
    
    .el-col {
      display: flex;
      font-size: 14px;
      justify-content: center;
      align-items: flex-start;
      margin: 10px 0;

      .label {
        color: #7f9dff;
        flex: 1;
        text-align: right;
      }

      .value {
        flex: 1;
        
        text-align: left;
        color: #fff;
        background-color: #2f3c66;
        padding: 3px 5px;
        border-radius: 5px;
        margin-left: 10px;
      }
    }
    
  }
  .row-container {
    display: flex;
    flex-wrap: wrap;
    .row-item{
      height: 36px;
      align-items: center;
      display: flex;
      width: 33.3%;
			.label {
        color: #7f9dff;
        flex: 1;
        text-align: right;
      }

      .value {
        flex: 1;
        text-align: left;
        color: #fff;
        margin-left: 10px;
        background-color: #2f3c66;
        padding: 3px 5px;
        border-radius: 5px;
      }
    }
    }
}
</style>